<template>
  <div>
    <Headerbar></Headerbar>
    <el-container>
      <el-container>
        <Sidebar></Sidebar>
        <el-main>
          <el-row :gutter="20">
            <el-col :span="12">
              <h3 class="common-title"><i class="el-icon-news"></i> 清单</h3>
              <el-input placeholder="添加任务至'收集箱',回车即可保存" size="medium"></el-input>
              <h3 class="common-title"><i class="el-icon-tickets"></i> 所有</h3>
              <el-table
                :data="tasks"
                tooltip-effect="dark"
                style="width: 100%">
                
                <el-table-column
                  type="selection"
                  width="55">
                </el-table-column>
                <el-table-column
                  prop="tag"
                  label=""
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="title"
                  label=""
                  show-overflow-tooltip>
                </el-table-column>
              </el-table>
              <h3 class="common-title"><i class="el-icon-circle-check-outline"></i> 已完成</h3>
              <el-table
                ref="multipleTable"
                :data="tasks"
                tooltip-effect="dark"
                style="width: 100%"
                highlight-current-row
                @current-change="handleCurrentChange"
                >
                <el-table-column
                  type="selection"
                  width="55"
                  >
                  <template slot-scope="scope">
                    <el-checkbox v-model="scope.row.complated"></el-checkbox>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="tag"
                  label=""
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="title"
                  label=""
                  show-overflow-tooltip>
                </el-table-column>
              </el-table>
            </el-col>
            <el-col :span="12">
              <h3 class="common-title"><i class="el-icon-view"></i> 清单详情</h3>
            </el-col>
          </el-row>

        </el-main>
      </el-container>
    </el-container>  
  </div>
</template>

<script>

import Headerbar from './Common/Headerbar'
import Sidebar from './Common/Sidebar'

export default {
  name: 'Home',
  data () {
    return {
      title: '所有...',
      users: [],
      tasks: [
        {
          id: 1,
          tag: '学习计划',
          title: '完成滴答清单项目的登录相关逻辑',
          complated: true
        }, 
        {
          id: 2,
          tag: '日常工作',
          title: '研究Mock.js相关知识，并整合到Vue项目中',
          complated: false
        },
        {
          id: 3,
          tag: '哇啦啦哈',
          title: '滴答清单项目—完成第一天的计划',
          complated: false
        }
      ]
  
    }
  },
  created: function () {

    // this.Axios.get('/api/user')
    //   .then((response) => {
    //     this.users = response.data.users
    // })
    //   .catch((error) => {
    //     console.log(error);
    // })

  },
  components: {
    Headerbar,
    Sidebar
  },
  methods: {
    handleCurrentChange(row) {
      //这里得到id后，可以更改状态
      //console.log(row.id)
      this.$message.success('清单已经完成')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  ul,li{
    list-style-type: none
  }
  .el-header {
    background-color: #F2F6FC;
    color: #333;
    line-height: 60px;
  }
  
  .el-aside {
    color: #333;
  }
</style>
